<template>
    <div class="chart" @mouseenter="mouseEnter" @mouseleave="mouseLeave" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted,onUnmounted } from 'vue';
let chart = ref();
let chartTime = ref(null);
let sData_ = ref([120, 200, 150, 80, 70, 110, 130])
let xData_ = ref(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let data_ = sData_.value;
    let xdata_ = xData_.value;
    let option = {
        yAxis: {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: xdata_
        },
        series: [
            {
                data: data_,
                type: 'bar'
            }
        ],
        dataZoom: {
            show: true,
            start: 0,
            end: 50
        },
    }
    myChart.setOption(option);
    chartTimeFun(data_,xdata_);
}
const chartTimeFun = (data,xdata) =>{
    chartTime.value = setInterval(()=>{
        chartTimeMethod(data,xdata);
    },1000);
}
const chartTimeMethod = (data_, xdata_) => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let start_ = data_.shift();
    data_.push(start_);
    let xstart_ = xdata_.shift();
    xdata_.push(xstart_);
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: xdata_
        },
        series: [
            {
                data: data_,
                type: 'bar'
            }
        ]
    })
}
const chartTimeClear = () =>{
    clearInterval(chartTime.value);
    chartTime.value = null;
}
const mouseEnter = () => {
    chartTimeClear();
}
const mouseLeave = () => {
    chartTimeFun(sData_.value,xData_.value);
}
onMounted(() => {
    initChart();
})

onUnmounted(()=>{
    clearInterval(chartTime.value);
})
</script>

<style lang="less" scoped>
.chart {
    width: 1000px;
    height: 500px;
}
</style>